v<template>
    <div>
        <div>
            <h4 class="font-weight-bold">接口测试</h4>
            <p> This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.</p>
        </div>
        <b-card header="法院涉诉综合查询：法院数据综合查询_检索" header-tag="span" class="mb-4">
            <Row>
                <i-col span="12">
                    <Form ref="testInterfaceForm" :model="testInterfaceForm" :rules="formRule" :label-width="100">
                        <FormItem label="示例：">
                            <Row>
                                <i-col span="24">
                                    企业名称： 上海银行股份有限公司<br> 姓名@身份证号： 
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="数据类型" prop="datatype">
                            <Row>
                                <i-col span="12">
                                    <Select v-model="testInterfaceForm.datatype" multiple style="width:260px">
                                        <Option v-for="item in datatypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="组织机构代码" prop="idcardNo">
                            <Row>
                                <i-col span="12">
                                    <i-input v-model="testInterfaceForm.idcardNo" placeholder="组织机构代码"></i-input>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="页码" prop="pageno">
                            <Row>
                                <i-col span="12">
                                    <i-input v-model="testInterfaceForm.pageno" placeholder="页码"></i-input>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="检索内容" prop="q">
                            <Row>
                                <i-col span="12">
                                    <i-input v-model="testInterfaceForm.q" placeholder="检索内容"></i-input>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="12">
                                <label style="color:red">可填：企业名称，姓名@身份证号，案号</label>
                                </i-col>
                            </Row>
                        </FormItem>

                        <FormItem>
                            <Button type="primary" @click="loadData()">提交</Button>
                        </FormItem>
                    </Form>
                </i-col>
                <i-col span="12">
                    <div class="result">
                        <tree-view :data="result" :options="{maxDepth: 3}"></tree-view>
                    </div>
                </i-col>
            </Row>

        </b-card>
    </div>
</template>

<style scoped>
.result {
    width: 100%;
    height: 100%;
    border: 2px dashed gray;
    min-height: 480px;
    background-color: cornsilk;
    padding: 10px;
}
</style>


<script>
import Axios from "axios";
export default {
    name: "TestInterfaceECIDetail",
    data() {
        return {
            result: { code: 200 },
            testInterfaceForm: {
                idcardNo: "",
                pageno: "1",
                q: "",
                datatype: [],
                sign: "d81e05371d9f02bef1a6b6fa7ce69f36"
            },
            formRule: {
                q: [
                    {
                        required: true,
                        message: "检索内容不能为空",
                        trigger: "blur"
                    }
                ]
            },
            datatypeList: [
                {
                    value: "cpws",
                    label: "裁判文书"
                },
                {
                    value: "fygg",
                    label: "法院公告"
                },
                {
                    value: "ktgg",
                    label: "开庭公告"
                },
                {
                    value: "zxgg",
                    label: "执行公告"
                },
                {
                    value: "sxgg",
                    label: "失信公告"
                }
            ]
        };
    },

    created() {},
    methods: {
        loadData: function() {
            // console.log(this.testInterfaceForm);
            let vm = this;
            if (vm.testInterfaceForm.q.trim() == "") {
                return false;
            }
            let datatypeList = vm.testInterfaceForm.datatype.join(",");
            let params = Object.assign({},this.testInterfaceForm,{
                datatype: datatypeList
            });
            // console.log(params,this.testInterfaceForm)

            Axios.post(
                "/app/v1/apis/16/result",
                params
            )
            .then(
                function(res) {
                    let resp = res.data; // HTTP响应数据
                    let status = res.status; // HTTP响应状态
                    // console.log(res);
                    vm.result = res.data;
                },
                function(err) {}
            )
            .catch(function(err) {});
        }
    }
};
</script>
